<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Ela Admin - HTML5 Admin Template</title>
		<meta name="description" content="Ela Admin - HTML5 Admin Template">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="assets/css/normalize.css">
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<link href="assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
	</head>

	<body>
		<!-- Left Panel -->
		<aside id="left-panel" class="left-panel">
			<nav class="navbar navbar-expand-sm navbar-default">
				<div id="main-menu" class="main-menu collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="index.html"><i class="menu-icon fa fa-laptop"></i>后台管理 </a>
						</li>
						<li class="menu-item-has-children dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-cogs"></i>管理员中心</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="fa fa-id-card-o"></i>
									<a href="ui-cards.html">个人信息</a>
								</li>
								<li><i class="fa fa-file-word-o"></i>
									<a href="forget.html">修改密码</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="hospital.html"> <i class="menu-icon fa fa-table"></i>医院管理</a>
						</li>
						<li>
							<a href="doctor.html"> <i class="menu-icon fa fa-th"></i>医生管理</a>
						</li>

						<li class="menu-item-has-children dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>用户管理</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="menu-icon fa fa-fort-awesome"></i>
									<a href="font-fontawesome.html">Font Awesome</a>
								</li>
								<li><i class="menu-icon ti-themify-logo"></i>
									<a href="font-themify.html">Themefy Icons</a>
								</li>
							</ul>
						</li>

						<li>
							<a href="disease.html"><i class="menu-icon fa fa-street-view"></i>疾病管理</a>
						</li>
						<!-- /.menu-title -->
						<li>
							<a href="drug.html"> <i class="menu-icon fa fa-glass"></i>药品管理</a>
						</li>

						<li class="menu-item-has-children dropdown active">
							<a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bar-chart"></i>统计排行</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="menu-icon fa fa-line-chart"></i>
									<a href="hosrank.html">医院统计</a>
								</li>
								<li><i class="menu-icon fa fa-area-chart"></i>
									<a href="doctorrank.html">医生统计</a>
								</li>
								<li><i class="menu-icon fa fa-pie-chart"></i>
									<a href="charts-peity.html">疾病统计</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
		</aside>
		<!-- /#left-panel -->
		<!-- Right Panel -->
		<div id="right-panel" class="right-panel">
			<!-- Header-->
			<header id="header" class="header">
				<div class="top-left">
					<div class="navbar-header">
						<a class="navbar-brand" href="./"><img src="images/logo.png" alt="Logo"></a>
						<a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
						<a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
					</div>
				</div>
				<div class="top-right">
					<div class="header-menu">
						<div class="header-left">
							<button class="search-trigger"><i class="fa fa-search"></i></button>
							<div class="form-inline">
								<form class="search-form">
									<input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
									<button class="search-close" type="submit"><i class="fa fa-close"></i></button>
								</form>-
							</div>

							<div class="dropdown for-notification">
								<button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-bell"></i>
                                <span class="count bg-danger">3</span>
                            </button>
								<div class="dropdown-menu" aria-labelledby="notification">
									<p class="red">You have 3 Notification</p>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-check"></i>
										<p>Server #1 overloaded.</p>
									</a>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-info"></i>
										<p>Server #2 overloaded.</p>
									</a>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-warning"></i>
										<p>Server #3 overloaded.</p>
									</a>
								</div>
							</div>

							<div class="dropdown for-message">
								<button class="btn btn-secondary dropdown-toggle" type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-envelope"></i>
                                <span class="count bg-primary">4</span>
                            </button>
								<div class="dropdown-menu" aria-labelledby="message">
									<p class="red">You have 4 Mails</p>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/1.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Jonathan Smith</span>
											<span class="time float-right">Just now</span>
											<p>Hello, this is an example msg</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/2.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Jack Sanders</span>
											<span class="time float-right">5 minutes ago</span>
											<p>Lorem ipsum dolor sit amet, consectetur</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/3.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Cheryl Wheeler</span>
											<span class="time float-right">10 minutes ago</span>
											<p>Hello, this is an example msg</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/4.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Rachel Santos</span>
											<span class="time float-right">15 minutes ago</span>
											<p>Lorem ipsum dolor sit amet, consectetur</p>
										</div>
									</a>
								</div>
							</div>
						</div>

						<div class="user-area dropdown float-right">
							<a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<img class="user-avatar rounded-circle" src="images/admin.jpg" alt="User Avatar">
							</a>

							<div class="user-menu dropdown-menu">
								<a class="nav-link" href="#"><i class="fa fa- user"></i>My Profile</a>

								<a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>

								<a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>

								<a class="nav-link" href="#"><i class="fa fa-power -off"></i>Logout</a>
							</div>
						</div>

					</div>
				</div>
			</header>
			<!-- /#header -->
			<!-- Breadcrumbs-->
			<div class="breadcrumbs">
				<div class="breadcrumbs-inner">
					<div class="row m-0">
						<div class="col-sm-4">
							<div class="page-header float-left">
								<div class="page-title">
									<h1>医院统计排行</h1>
								</div>
							</div>
						</div>
						<div class="col-sm-8">
							<div class="page-header float-right">
								<div class="page-title">
									<ol class="breadcrumb text-right">
										<li>
											<a href="#">后台管理</a>
										</li>
										<li>
											<a href="#">统计排行</a>
										</li>
										<li class="active">医院</li>
									</ol>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /.breadcrumbs-->
			<!-- Content -->
			<div class="content">
				<div class="animated fadeIn">
					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="card-body">
									<h4 class="mb-3">医院等级统计</h4>
									<div id="count-hos-level" style="height: 400px;width: 100%;"></div>
								</div>
							</div>
						</div>
						<!-- /# column -->

					</div>
					<!-- /# row -->

					<div class="row">
						<div class="col-lg-6">
							<div class="card">
								<div class="card-body">
									<h4 class="mb-3">医院认证比较</h4>
									<div id="count-hos-isAuth" style="height: 300px;width: 100%;"></div>
								</div>
							</div>
							<!-- /# card -->
						</div>
						<!-- /# column -->

						<div class="col-lg-6">
							<div class="card">
								<div class="card-body">
									<h4 class="mb-3">医院经营类型统计</h4>
									<div id="count-hos-manage" style="height: 300px;width: 100%;"></div>
								</div>
							</div>
							<!-- /# card -->
						</div>
						<!-- /# column -->
					</div>
					<!-- /# row -->
					<div class="row">
						<div class="col-lg-6">
							<div class="card">
								<div class="card-body">
									<h4 class="mb-3">医院访问量排行</h4>
									<div class="col-lg-12">
										<select id="select-type" class="form-control">
											<option value="">医院类型</option>
											<!--此处填充所有医院类型-->
										</select>
									</div>
									<div id="top-hos-views" style="height: 400px;width: 100%;"></div>
								</div>
							</div>
							<!-- /# card -->
						</div>
						<!-- /# column -->

						<div class="col-lg-6">
							<div class="card">
								<div class="card-body">
									<h4 class="mb-3">Bar Chart</h4>
									<div class="flot-container">
										<div id="flotCurve" style="width:100%;height:275px;"></div>
									</div>
								</div>
							</div>
							<!-- /# card -->
						</div>
						<!-- /# column -->
					</div>
					<!-- /# row -->

				</div>
				<!-- .animated -->
			</div>
			<!-- /.content -->
			<div class="clearfix"></div>
			<!-- Footer -->
			<footer class="site-footer">
				<div class="footer-inner bg-white">
					<div class="row">
						<div class="col-sm-6">
							Copyright &copy; 2018 Ela Admin. More Templates
							<a href="http://www.cssmoban.com/" target="_blank" title="XX"></a> - Collect from
							<a href="http://www.cssmoban.com/" title="XX" target="_blank">XX</a>
						</div>
						<div class="col-sm-6 text-right"> Designed by Colorlib
						</div>
					</div>
				</div>
			</footer>
			<!-- /.site-footer -->
		</div>
		<!-- /#right-panel -->

		<!-- Scripts -->
		<script src="assets/js/vendor/jquery-2.1.4.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.matchHeight.min.js"></script>
		<script src="assets/js/main.js"></script>

		<script type="text/javascript" src="assets/js/echarts.min.js"></script>

		<script>
			var $ = jQuery.noConflict();
			//获取医院等级排行
			getHosLevelRank();
			//获取医院认证统计
			getCountHosIsAuth();

			getCountHosManage();

			function getHosLevelRank() {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/rank/level",
					type: 'GET',
					dataType: "json",
					success: function(d) {
						var x = new Array();
						var y = new Array();
						for(var i = 0; i < d.length; i++) {
							x.push(d[i].level);
							y.push(d[i].count);
						}
						countHosLevel(x, y);
					}
				});
			}

			function countHosLevel(x, y) {
				var dom = document.getElementById("count-hos-level");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '坐标轴刻度与标签对齐';

				option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: x,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '该等级数量',
						type: 'bar',
						barWidth: '60%',
						data: y
					}]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}

			function getCountHosIsAuth() {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/rank/isAuth",
					type: 'GET',
					dataType: "json",
					success: function(d) {
						var x = new Array();
						var y = new Array();
						for(var i = 0; i < d.length; i++) {
							x.push(d[i].isAuth);
							obj = new Object();
							obj.name = d[i].isAuth;
							obj.value = d[i].count;
							y.push(obj);
						}
						//						console.log(x);
						//						console.log(y);
						countHosPie("count-hos-isAuth", '医院认证', x, y);
					}
				});
			}

			function getCountHosManage() {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/rank/manage",
					type: 'GET',
					dataType: "json",
					success: function(d) {
						var x = new Array();
						var y = new Array();
						for(var i = 0; i < d.length; i++) {
							x.push(d[i].manage);
							obj = new Object();
							obj.name = d[i].manage;
							obj.value = d[i].count;
							y.push(obj);
						}
						//						console.log(x);
						//						console.log(y);
						countHosPie("count-hos-manage", '经营类型', x, y);
					}
				});
			}

			function countHosPie(type, name, x, y) {
				var dom = document.getElementById(type);
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: x
					},
					series: [{
						name: name,
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: y,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}

			getcountHosTopViews("");

			function getcountHosTopViews(type) {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/rank/hosViewTop",
					type: 'POST',
					data: {
						type: type
					},
					dataType: "json",
					success: function(d) {
						var source = new Array();
						var title = new Array();
						title.push("score");
						title.push("views");
						title.push("hosName");
						source.push(title);
						for(var i = d.length - 1; i >= 0; i--) {
							var rd = randomNum(10, 100)
							var content = new Array();
							content.push(rd);

							content.push(d[i].views);
							content.push(d[i].hosName);
							source.push(content);
						}
						countHosTopViews(source);
					}
				});
			}

			function countHosTopViews(source) {
				var dom = document.getElementById("top-hos-views");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				var option = {
					dataset: {
						source: source
					},
					grid: {
						containLabel: true
					},
					xAxis: {
						name: 'amount'
					},
					yAxis: {
						type: 'category'
					},
					visualMap: {
						orient: 'horizontal',
						left: 'center',
						min: 10,
						max: 100,
						//						text: ['High Score', 'Low Score'],
						// Map the score column to color
						dimension: 0,
						inRange: {
							color: ['#D7DA8B', '#E15457']
						}
					},
					series: [{
						type: 'bar',
						encode: {
							// Map the "amount" column to X axis.
							x: 'views',
							// Map the "product" column to Y axis
							y: 'hosName'
						}
					}]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}

			//生成从minNum到maxNum的随机数
			function randomNum(minNum, maxNum) {
				switch(arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			}
			
			 getTypeAll();
			//类型
			function getTypeAll() {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/hospital/allType",
					type: 'GET',
					dataType: "json",
					success: function(d) {
						for(i = 0; i < d.length; i++) {
							addElOption("select-type", d[i]);
							//console.log(d[i]);
						}
					}
				});
			}
			function addElOption(container, obj) {
				var el = '<option value="' + obj + '">' + obj + '</option>';
				$("#" + container).append(el);
			}
			//选择类型
			$("#select-type").change(function() {
				var type=$("#select-type").val();
				getcountHosTopViews(type);
			});
		</script>
	</body>

</html>